<template>
  <div class="home">
    <div class="page" id="scrollBox">
      <!-- 头部信息 -->
      <div class="head">
        <div class="nav">
          <img src="@/assets/img/slogan2.png" class="slogan2" />
          <!-- <van-icon name="arrow-left" size="6vw" color="#fff" @click="back" /> -->
          <img src="@/assets/img/savePhone.png" class="savePhone" @click="redirect('/saveDesktop','添加到桌面')" />
        </div>
        <div class="shop_info">
          <div class="row1">
            <RouterLink class="left" to="/shop" @click="clickRecord('店铺展示页')">
              <van-image round class="avatar" :src="info.wx_headpic" fit="cover" />
              <p>{{ shopName }}</p>
              <van-icon name="arrow" size="4vw" color="#fff" />
            </RouterLink>
            <div class="right">
              <van-button color="#fff" class="btn-qrcode" @click="globe.setQrcodeDialog(true)">
                <template #icon><img src="@/assets/img/icon-qrcode.png" class="icon-qrcode"></template>
                店主在线
              </van-button>
              <van-button color="#fff" icon="phone" class="btn-phone" :url="`tel:${info.tel}`">联系电话</van-button>
            </div>
          </div>
          <van-divider />
          <div class="tagGroup">
            <div class="tag" v-for="(h,i) in info.shop_honors" :key="i">{{ h }}</div>
          </div>
          <div class="honor"></div>
        </div>
      </div>
      <!-- 内容路由 -->
      <router-view v-slot="{ Component }">
        <KeepAlive>
          <component :is="Component" />
        </KeepAlive>
      </router-view>
    </div>
    <!-- 特殊店铺广告提示 -->
    <template v-if="showFixedTip && user.homeAdUrl">
      <van-image class="fixedTip" src="/ad.gif" fit="cover" @click="backWenCai()" />
      <div class="fixedTipHolder van-safe-area-bottom"></div>
    </template>
    <!-- 底部导航 -->
    <van-tabbar v-model="active" :fixed="true" safe-area-inset-bottom placeholder route inactive-color="#888"
      @change="onChange">
      <van-tabbar-item replace :to="`/${tab.name}`" icon-prefix="iconfont" :icon="tab.name" v-for="tab in tabs">
        {{tab.label}}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { useUserStore, useGlobeStore } from "@/stores";
import { storeToRefs } from 'pinia'
import { useRouter, onBeforeRouteLeave } from 'vue-router'

const router = useRouter()
const user = useUserStore()
const globe = useGlobeStore();
const { info, i } = storeToRefs(user)
const active = ref(0);
const showFixedTip = computed(() => user.shopUuid.includes(i.value))
const shopName = computed(() => {
  const name = user.shopName;
  return (name&&name.length > 8) ? name.substring(0, 8) + "..." : name;
})
const tabs = [
  { name: 'match', label: '赛事分析'},
  { name: 'deep', label: '深度解读' },
  { name: 'injury', label: '伤停+情报' },
]

function back(){
  router.go(-1)
}

function clickRecord(label, path){
  user.log({ type: 'event', action: 'click', opt_label: label, target_url: path });
}

function onChange(index){
  const { label, name } = tabs[index];
  clickRecord(label, `/${name}`);
}

function redirect(path, label) {
  router.push(path);
  clickRecord(label, path);
}

function backWenCai(){
  clickRecord("客服推荐");
  window.location.href = `${user.homeAdUrl}?i=${user.i}`;
}
onActivated(() => {
  document.getElementById("scrollBox").scrollTop = globe.position;
});
onBeforeRouteLeave(()=>{
  globe.saveScrollPosition(document.getElementById("scrollBox").scrollTop)
})
</script>

<style lang="less" scoped>
@import "@/assets/varables.less";
.home{
  display: flex;
  flex-direction: column;
  // height: 100vh;
  --van-tabbar-height: 50px;
  :deep(.iconfont){
    font-size: 20px;
    font-weight: bold;
  }
  .page {
    // flex: 1;
    // overflow-y: scroll;
    // -webkit-overflow-scrolling: touch; // 启用惯性滚动
    // transform: translateZ(0);
    --van-divider-margin: 0;
    --van-button-normal-padding: 0 4px;
  }
  .head {
    width: 100%;
    max-height: 184px;
    min-height: 150px;
    background: url("@/assets/img/bg.png") center bottom no-repeat;
    background-color: #ff4d29;
    background-size: cover;
    padding: var(--vueuse-safe-area-top) 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;

    .nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 343px;
      margin: 0 auto;
      position: relative;
    }
    .slogan2{
      width: 116px;
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    .savePhone {
      width: 102px;
      height: 28px;
    }

    .shop_info {
      width: 343px;
      height: 104px;
      background-image: linear-gradient(90deg, #F6BF42 0%, #F19937 100%);
      backdrop-filter: blur(8px);
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      margin: 8px auto 0;
      overflow: hidden;
      position: relative;

      .row1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 8px 4px;
        height: 68px;
        .avatar{
          width: 52px;
          height: 52px;
          margin-right: 5px;
          border: 1px solid @prime1;
        }
      }

      .left {
        flex: 1;
        display: flex;
        align-items: center;
        color: #fff;
        p{
          font-size: 20px;
          font-weight: 700;
        }
      }

      .right {
        --van-button-radius: 4px;
        min-width: 68px;
        font-family: "Alimama ShuHeiTi";
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .btn-phone {
        color: #141414 !important;
        min-width: 68px;
        height: 24px;
        font-size: 10px !important;
        font-weight: 700;
        line-height: 1;
        margin-top: 8px;
      }

      .btn-qrcode {
        color: @prime1 !important;
        min-width: 68px;
        height: 24px;
        font-size: 10px !important;
        line-height: 1;

        img {
          width: 12px;
          display: block;
        }
      }
      .honor{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 108px;
        height: 20px;
        z-index: 0;
        background: url("@/assets/img/honor.png") no-repeat;
        background-size: cover;
      }
    }

    :deep(.van-divider) {
      --van-divider-border-color: #FFAA00;
    }

    .tagGroup {
      width: 100%;
      display: flex;
      overflow-x: scroll;
      padding: 6px 5px 6px;
      position: relative;
      z-index: 1;

      .tag {
        flex-shrink: 0;
        padding: 5px 6px;
        font-size: 10px;
        line-height: 10px;
        color: #fff;
        background-color: @prime1;
        margin: 0 2px;

        &:first-child {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }

        &:last-child {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }
    }
  }
  .fixedTip{
    position: fixed;
    left: 0px;
    bottom: 50px;
    // margin-bottom: var(--vueuse-safe-area-bottom);
    width: 100%;
    height: 104px;
  }
  .fixedTipHolder{
    height: 104px;
  }
}
</style>
